<script setup name="Case">
import patentService from "@/api/patentinfo/index.js";
import {
  CirclePlusFilled,
  Edit,
  Search,
  UploadFilled,
} from '@element-plus/icons-vue'
import Message from 'vue-m-message'
import { reactive, ref } from 'vue'
import fundPoolService from '@/api/finance/fundPool.js'
import customerInformationService from '@/api/customerInformation/index.js'
import userServices from '@/api/user/user.js'
import caseService from '@/api/case/index.js'
import BaseForm from '@/components/BaseForm/BaseForm.vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
import { useDict } from '@/utils/dict.js'
import useMessageBox from '@/utils/useMessageBox.js'

const auditFormRef = ref(null)
const status = ref('')
const scFormRef = ref(null)
const Row = ref('')
const gcsId = ref('')
const customerId = ref('')
const dutyId = ref('')
const secDutyId = ref('')
const isDele = ref(true)
const fileVisible = ref(false)
const isFullScreen = ref(false)
const uploadVisible = ref(false)
const uploadDisabled = ref(false)
const rowStatus = ref('')
const fileType = ref('')
const isFileType = ref('')
const limit = ref('')
const role = ref('')
const infoList = ref([])
const patentStatusOption = ref([])
const disabled = ref(false)
const stepList = ref([])
const fileUrl = ref('')
const fileUrlList = ref([])
const companyquerylist = ref({})
const activeName = ref('first')
const tableData = ref([])
const businessList = ref([])
const engineerlist = ref([])
const customerName = ref([])
const selectionList = ref([])
const isBatchProcessing = ref(false)
const queryParam = ref({})
const ids = ref([])
const editVisible = ref(false)
const btnLoad = ref(false)
const updateDialogVisible = ref(false)
const updateDialogVisible1 = ref(false)
const auditVisible = ref(false)
const matchVisible = ref(false)
const updateDialogTitle = ref('新增')
const customerlist = ref([])
const { proxy } = getCurrentInstance()
const { sys_case_show, sys_patent_status, patent_file_type, sys_case_type, certificate_type, country_or_area }
  = useDict(
    'sys_proceeds_time',
    'sys_pay_status',
    'sys_patent_status',
    'sys_case_show',
    'patent_file_type',
    'sys_case_type',
    'certificate_type',
    'country_or_area',
  )
const auditForm = ref({
  patentId: '',
  auditStatus: '1',
  auditSuggest: '',
})
// 分配表单
const allotForm = ref({
  patentId: '',
  contractId: '',
  engineerId: '',
})
// 查询
const attachmentForm = ref({
  patentId: '',
  fileType: '',
})
// 上传表单
const uploadForm = ref({
  patentId: '',
  fileType: '',
  fileList: [],
  file: '',
})
const tabsList = reactive([
  {
    label: '基本信息',
    name: 'first',
    icon: 'tab-first',
    id: 1,
  },
  {
    label: '流程信息',
    name: 'second',
    icon: 'tab-second',
    id: 2,
  },
  {
    label: '附件',
    name: 'third',
    icon: 'tab-third',
    id: 3,
  },
])
// 修改表单
const editForm = ref({
  reelNumber: '',
  patentId: '',
  contractNo: '',
  customerId: '',
  contractId: '',
  patentName: '',
  patentType: '',
  businessName: '',
  status: '',
  remark: '',
  engineerId: '',
  submitcompanyId: '',
  patentpersonId: [],
  caseType: '',
  patentLinkman: '',
  linkmanMail: '',
  linkmanPhone: '',
  inventorList: [],
  customerInformationList: [

  ],
})
const roleId = ref('')
const myId = ref('')
const nickName = ref('')
const roleGroup = ref('')
const postGroup = ref('')
const patentId = ref('')
const searchConfig = reactive([
  {
    label: '合同编号',
    field: 'contractNo',
    type: 'input',
    defaultShow: true,
  },
  {
    label: '客户名称',
    field: 'customerId',
    type: 'select',
    defaultShow: true,
    options: {
      data: customerlist,
      label: 'customerName',
      value: 'customerId',
      key: 'customerId',
    },
  },
  {
    label: '案件编号',
    field: 'reelNumber',
    type: 'input',
    defaultShow: true,
  },
  {
    label: '业务名称',
    field: 'patentName',
    type: 'input',
    defaultShow: true,
  },
  {
    label: '业务类型',
    field: 'businessId',
    type: 'select',
    defaultShow: true,
    options: {
      data: businessList,
      label: 'businessName',
      value: 'businessId',
      key: 'businessId',
    },
  },
  {
    label: '状态',
    field: 'status',
    type: 'custom',
    defaultShow: true,
  },
  {
    label: '分配人员',
    field: 'engineerId',
    type: 'select',
    defaultShow: true,
    options: {
      data: engineerlist,
      label: 'userName',
      value: 'userId',
      key: 'userId',
    },
  },
  {
    label: '备注',
    field: 'remark',
    type: 'input',
    defaultShow: true,
  },
  {
    label: '是否打回',
    field: 'isRepulse',
    type: 'select',
    defaultShow: true,
    options: {
      data: sys_case_show,
      label: 'label',
      value: 'value',
      key: 'value',
    },
  },
  {
    label: '专利权人',
    field: 'patentpersonId',
    type: 'select',
    options: {
      data: customerlist,
      label: 'customerName',
      value: 'customerId',
    },
  },
])
const addMemberDialog = ref(false)
const tableColumns = reactive([
  { type: 'checkbox', width: 50 },
  {
    field: 'customerName',
    title: '客户名称',
    align: 'center',
    minWidth: 200,
    showOverflow: 'tooltip',
  },
  {
    field: 'contractNo',
    title: '合同编号',
    align: 'center',
    minWidth: 120,
    showOverflow: 'tooltip',
  },
  {
    field: 'reelNumber',
    title: '案件编号',
    align: 'center',
    minWidth: 120,
    showOverflow: 'tooltip',
  },
  {
    field: 'patentName',
    title: '案件名称',
    align: 'center',
    minWidth: 200,
    showOverflow: 'tooltip',
  },
  {
    field: 'businessName',
    title: '业务类型',
    align: 'center',
    minWidth: 100,
    showOverflow: 'tooltip',
  },
  {
    field: 'status',
    title: '状态',
    align: 'center',
    minWidth: 100,
    showOverflow: 'tooltip',
    slots: { default: 'status' },
  },
  {
    field: 'nickName',
    title: '分配人员',
    align: 'center',
    minWidth: 100,
    showOverflow: 'tooltip',
  },
  {
    field: 'patentPerson',
    title: '专利权人',
    align: 'center',
    minWidth: 100,
  },
  {
    field: 'remark',
    title: '备注',
    align: 'center',
    minWidth: 120,
    showOverflow: 'tooltip',
  },
  {
    field: 'operate',
    title: '操作',
    align: 'center',
    minWidth: 200,
    fixed: 'right',
    slots: { default: 'operate' },
  },
])
// 发明人表格
const inventorColumns = reactive([
  {
    field: 'inventorName',
    title: '姓名',
    align: 'center',
    minWidth: 50,
    slots: { default: 'inventorName' },
  },
  {
    field: 'identityType',
    title: '证件类型',
    align: 'center',
    minWidth: 70,
    slots: { default: 'identityType' },
  },
  {
    field: 'nationality',
    title: '国籍或地区',
    align: 'center',
    minWidth: 80,
    slots: { default: 'nationality' },
  },
  {
    field: 'inventorIdentity',
    title: '证件号',
    align: 'center',
    minWidth: 100,
    slots: { default: 'inventorIdentity' },
  },
  {
    field: 'isPublic',
    title: '是否公开',
    align: 'center',
    slots: { default: 'isPublic' },
  },
  {
    field: 'inventorOrder',
    title: '顺序',
    align: 'center',
    minWidth: 10,
  },
  {
    field: 'operate',
    title: '操作',
    align: 'center',
    slots: { default: 'operate' },
  },
])

// 申请人表格
const customerInformationColumns = reactive([
  {
    field: 'customerName',
    title: '姓名',
    align: 'center',
    minWidth: 50,
  },
  {
    field: 'identityType',
    title: '证件类型',
    align: 'center',
    minWidth: 70,
  },
  {
    field: 'nationality',
    title: '国籍或地区',
    align: 'center',
    minWidth: 80,
    slots: { default: 'nationality' },
  },
  {
    field: 'inventorIdentity',
    title: '证件号',
    align: 'center',
    minWidth: 100,
    slots: { default: 'inventorIdentity' },
  },
  {
    field: 'isPublic',
    title: '是否公开',
    align: 'center',
    slots: { default: 'isPublic' },
  },
  {
    field: 'inventorOrder',
    title: '顺序',
    align: 'center',
    minWidth: 10,
  },
  {
    field: 'operate',
    title: '操作',
    align: 'center',
    slots: { default: 'operate' },
  },
])
// 上传表格
const uploadColumns = reactive([
  {
    field: 'fileName',
    title: '文件名称',
    align: 'center',
    showOverflow: 'tooltip',
    minWidth: 200,
  },
  {
    field: 'fileType',
    title: '类型',
    align: 'center',
    slots: { default: 'fileType' },
    showOverflow: 'tooltip',
    minWidth: 150,
  },
  {
    field: 'nickName',
    title: '上传人',
    align: 'center',
    showOverflow: 'tooltip',
    minWidth: 100,
  },
  {
    field: 'createTime',
    title: '上传日期',
    align: 'center',
    width: 160,

  },
  {
    field: 'operate',
    title: '操作',
    align: 'center',
    width: 180,
    slots: { default: 'operate' },
  },
])
const updateFormList = ref([
  {
    label: '分配人员',
    field: 'engineerId',
    type: 'select',
    defaultShow: true,
    options: {
      data: engineerlist,
      label: 'userName',
      value: 'userId',
      key: 'userId',
    },
    rules: [{ required: true, message: '请选择分配人员', trigger: 'blur' }],
    span: 24,
  },
])
const updateFormModel = ref({})
const collapseVal = ref(['1', '2', '3', '4', '5'])
const rules = {
  // 分配
  engineerId: [
    { required: true, message: '分配人员不能为空', trigger: 'blur' },
  ],
  //
  auditStatus: [
    { required: true, message: '状态不能为空', trigger: 'blur' },
  ],
  auditSuggest: [
    { required: true, message: '意见不能为空', trigger: 'blur' },
  ],
  // 上传
  fileType: [{ required: true, message: '类型不能为空', trigger: 'change' }],
  file: [{ required: true, message: '上传文件不能为空', trigger: 'change' }],
  // 新增修改
  reelNumber: [
    { required: true, message: '案件编号不能为空', trigger: 'blur' },
  ],
  contractNo: [
    { required: true, message: '合同编号不能为空', trigger: 'blur' },
  ],
  customerId: [
    { required: true, message: '客户名称不能为空', trigger: 'blur' },
  ],
  patentName: [
    { required: true, message: '案件名称不能为空', trigger: 'blur' },
  ],
  businessName: [
    { required: true, message: '业务名称不能为空', trigger: 'blur' },
  ],
  status: [{ required: true, message: '状态不能为空', trigger: 'blur' }],
  remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
  engineerId: [
    { required: true, message: '分配人员不能为空', trigger: 'blur' },
  ],
  submitcompanyId: [
    { required: true, message: '递交端口不能为空', trigger: 'blur' },
  ],
  patentpersonId: [
    { required: true, message: '专利权人不能为空', trigger: 'blur' },
  ],
  caseType: [{ required: true, message: '案件方式不能为空', trigger: 'blur' }],
  patentLinkman: [
    { required: true, message: '专利联系人不能为空', trigger: 'blur' },
  ],
  linkmanMail: [
    {
      required: true,
      message: '专利联系人邮箱不能为空',
      trigger: 'blur',
    },
    {
      type: 'email',
      message: '请输入正确的邮箱地址',
      trigger: ['blur', 'change'],
    },
  ],
  linkmanPhone: [
    {
      required: true,
      message: '专利联系人电话不能为空',
      trigger: 'blur',
    },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '请输入正确的手机号',
      trigger: 'blur',
    },
  ],
}

const pagerConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
  customerId: '',
})
const inventorVoVisible = ref(false)
const inventorFieldList = reactive([
  {
    label: '发明人顺序',
    field: 'inventorOrder',
    type: 'input',

  },
  {
    label: '发明人名称',
    field: 'inventorName',
    type: 'input',
  }, {
  },
])
const inventorForm = ref({})
// 上传文件筛选
const handleIncludePatentType = computed(() => {
  return patent_file_type.value.filter((dict, index) => {
    return patentStatusOption.value.includes(dict.value)
  })
})

const filteredStatusOptions = computed(() =>
  sys_patent_status.value.slice(0, 7),
)

onMounted(() => {
  getList()
  getUser()
})

// function isHidden(row,value){
//   console.log(row,value,'row');
//   let list=row
//   if(value=='edit'){
//     list.forEach(item=>{
//       if(item.status === '1' && item.userName == nickName.value){
//         return true
//       }
//     })

//   }
// }

// 获取用户信息
function getUser() {
  userServices.getUserProfile().then((response) => {
    console.log(response)
    roleId.value = response.data.user.roles[0].roleId
    role.value = response.data.user.roles[0].roleKey
    console.log(roleId.value, 'roleId')
    myId.value = response.data.user.userId
    console.log(myId.value, 'myId')
    // this.nickName = response.data.user.nickName;
    nickName.value = response.data.user.userName
    console.log(nickName.value, 'nickname')
    roleGroup.value = response.data.roleGroup
    console.log(roleGroup.value, 'roleGroup')
    postGroup.value = response.data.postGroup
    console.log(postGroup.value, 'postGroup')
  })
}
// 列表
function getList() {
  const formData = {
    ...queryParam.value,
    pageSize: pagerConfig.value.pageSize,
    pageNum: pagerConfig.value.currentPage,
  }
  btnLoad.value = true
  caseService.list(formData).then((res) => {
    tableData.value = res.rows
    pagerConfig.value.total = res.total
    btnLoad.value = false
  })
  fundPoolService.optionList().then((res) => {
    customerlist.value = res.data
  })
  caseService.listBusiness().then((response) => {
    businessList.value = response.rows
  })
  caseService.EngineerList().then((response) => {
    engineerlist.value = response.data
  })
  caseService.CompanyQueryList().then((response) => {
    companyquerylist.value = response.data
  })
}

// 分页
function handlePageChange({ currentPage, pageSize }) {
  pagerConfig.value.currentPage = currentPage
  pagerConfig.value.pageSize = pageSize
  getList()
}

function handleCheckChange({ checked, records, reserves }) {
  selectionList.value = records
  const res = records.map(item => item.patentId)
  if (reserves.length > 0) {
    if (checked) {
      ids.value.push(...res)
    }
    else {
      const customerIdSet = new Set(reserves.map(item => item.customerId))
      ids.value = ids.value.filter(item => customerIdSet.has(item))
    }
  }
  else {
    ids.value = res
  }
}

// 搜索
function handleSearch(e, type) {
  if (type === 'reset') {
    status.value = ''
  }
  queryParam.value = {
    status: status.value,
    // "params[beginSkTime]": e.skTime ? `${e.skTime[0]} 00:00:00` : null,
    // "params[endSkTime]": e.skTime ? `${e.skTime[1]} 00:00:00` : null,
    ...e,
  }
  delete queryParam.value.skTime
  console.log(e)
  getList()
}

function handleReset() {
  updateDialogVisible.value = false
  updateDialogVisible1.value = false
}
// 批量分配
function handleBatchAllocation() {
  updateFormModel.value = []
  isBatchProcessing.value = true
  updateDialogVisible.value = true
  updateDialogTitle.value = '批量分配'
}

/** 分配 */
function handleAllot(row) {
  isBatchProcessing.value = false
  console.log(row, 'row')
  allotForm.value.patentId = row.patentId
  allotForm.value.contractId = row.contractId
  updateDialogVisible.value = true
  updateDialogTitle.value = '分配'
}

function allocationClose() {
  allotForm.value.engineerId = ''
  updateDialogVisible.value = false
}
/** 分配提交 */
function allotSubmitForm() {
  if (allotForm.value.patentId != null) {
    console.log(allotForm.value, 'allotForm.value')
    if (isBatchProcessing.value) {
      const params = {
        patentIds: ids.value.join(','),
        engineerId: allotForm.value.engineerId,
      }
      caseService
        .allocationBatch(params)
        .then((response) => {
          if (response.code == 200) {
            Message.success('批量分配成功')
            updateDialogVisible.value = false
            getList()
          }
        })
        .finally(() => { })
    }
    else {
      caseService
        .Allot(allotForm.value)
        .then((response) => {
          if (response.code == 200) {
            Message.success('分配成功')
            updateDialogVisible.value = false
            getList()
          }
        })
        .finally(() => { })
    }
  }
  else {
    updateDialogVisible.value = false
  }
}

// 文件类型
function fileTypeChange() {
  console.log(uploadForm.value.fileType, 'uploadForm.value.fileType')
  if (uploadForm.value.fileType == '1') {
    fileType.value = ['docx', 'zip']
    limit.value = 1
  }
  else if (uploadForm.value.fileType == '2') {
    fileType.value = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'txt', 'pdf', 'zip']
    isFileType.value = 2
    limit.value = 10
  }
  else {
    fileType.value = ['pdf']
    limit.value = 1
  }
}

// 选择文件
function handleUploadInput(_val) { }

// 附件
function handleQueryAtt() {
  caseService.attachmentQuery(attachmentForm.value).then((res) => {
    const { rows } = res
    infoList.value = rows
  })
}

// 关闭文件
function cancelFile() {
  if (uploadDisabled.value) {
    editVisible.value = false
  }
  uploadVisible.value = false
}
// 上传文件
function handleUpload(type) {
  uploadForm.value.file = ''
  console.log(role.value, '上传文件')
  uploadVisible.value = true
  uploadDisabled.value = type != 2
  uploadForm.value.patentId = editForm.value.patentId
  patentStatusOption.value = []
  // engineer:工程师 engineerManager:工程师组长 business:业务员 processPersonnel:流程人员
  if (role.value == 'engineer' || role.value == 'engineerManager') {
    uploadForm.value.fileType = '1'
    patentStatusOption.value = ['1', '2']
  }
  else if (role.value == 'business') {
    uploadForm.value.fileType = '2'
    patentStatusOption.value = [
      '2',
      '3',
      '4',
      '5',
      '6',
      '7',
      '8',
      '9',
      '10',
      '11',
    ]
  }
  else if (role.value == 'processPersonnel') {
    if (rowStatus.value == 6) {
      uploadForm.value.fileType = '3'
    }
    else if (rowStatus.value == 7) {
      uploadForm.value.fileType = '4'
    }
    else if (rowStatus.value == 8) {
      uploadForm.value.fileType = '5'
    }
    else if (rowStatus.value == 18) {
      uploadForm.value.fileType = '6'
    }
    else if (rowStatus.value == 9 || rowStatus.value == 11) {
      uploadForm.value.fileType = '7'
    }
    else if (rowStatus.value == 12) {
      uploadForm.value.fileType = '9'
    }
    else if (rowStatus.value == 13) {
      uploadForm.value.fileType = '10'
    }
    patentStatusOption.value = ['2', '3']
  }
  if (uploadForm.value.fileType == '1') {
    fileType.value = ['docx', 'zip']
    limit.value = 1
    isFileType.value = 1
  }
  else if (uploadForm.value.fileType == '2') {
    fileType.value = [
      'doc',
      'docx',
      'xls',
      'xlsx',
      'ppt',
      'txt',
      'pdf',
      'zip',
      'jpg',
      'png',
    ]
    isFileType.value = 2
    limit.value = 10
  }
  else {
    fileType.value = ['pdf']
    isFileType.value = 1
    limit.value = 1
  }
}

// 业务员列表
function ywyList(customerInformationId) {
  customerInformationService
    .getDetail(customerInformationId)
    .then((response) => {
      console.log(response.data, 'response.data')
      dutyId.value = response.data.dutyId
      if (response.data.secDutyId) {
        secDutyId.value = response.data.secDutyId
      }
    })
}

// 查看  修改
function handleUpdate(row, type) {
  Row.value = row
  // uploadForm.value.fileList=[]
  if (type == 2) {
    disabled.value = true
    updateDialogTitle.value = '查看'
  }
  else {
    updateDialogTitle.value = '修改'
    disabled.value = false
  }
  customerId.value = row.customerId
  console.log(row, 'row.customerId')
  ywyList(customerId.value)
  patentId.value = row.patentId
  gcsId.value = row.engineerId
  activeName.value = type == 2 ? 'first' : 'third'
  caseService
    .getPatent(patentId.value)
    .then((response) => {
      const { data, code } = response
      //   this.assignPersonnel = data.nickName;
      //   console.log(response, "response");
      //   console.log(this.assignPersonnel, "assignPersonnel");
      fileUrlList.value = data.sysPatentFileList
      console.log(fileUrlList.value, 'fileUrlList.value ')
      //   this.loading = false;
      if (code == 200) {
        // 基本信息
        for (const val in editForm.value) {
          editForm.value[val] = data[val]
        }
        console.log(response.data.inventorVoList, 6666)
        editForm.value.patentpersonId = response.data.patentpersonId.split(',')
        editForm.value.inventorList = response.data.inventorVoList
          ? response.data.inventorVoList
          : []
        editForm.value.customerInformationList = [
          {
            customerOrder: 1,
            customerTypeCode: '2',
            customerName: '芜湖市弋江区数字经济与产业发展研究院',
            identityType: 'F',
            customerIdentity: '51340203MJB083837K',
            localProvinceCode: '340000',
            localCityCode: '340200',
            localAreaCode: '',
            address: '安徽省芜湖市弋江区科技产业园3号楼20层',
            postalCode: '241000',
            linkman: '章健',
            phone: '18140174236',
            nationality: 'CN',
            frequentLocation: 'CN',
            isRepresentative: '1',
            email: '18140174236@qq.com',
          },
          {
            customerOrder: 2,
            customerTypeCode: '3',
            customerName: '芜湖咖博网络科技有限公司',
            identityType: 'F',
            customerIdentity: '91340200MA2T38064Q',
            localProvinceCode: '340000',
            localCityCode: '340200',
            localAreaCode: '',
            address: '安徽省芜湖市弋江区高新技术开发区科技产业园1号楼启迪之星1层104-15',
            postalCode: '241000',
            linkman: '王强',
            phone: '18140174235',
            nationality: 'CN',
            frequentLocation: 'CN',
            isRepresentative: '0',
            email: '18140174235@qq.com',
          },
        ]
        // this.editForm.inventorList = this.editForm.inventorList
        // ? this.editForm.inventorList
        // : [];
        console.log(editForm.value, 'inventorList')
        // 流程信息
        stepList.value = data.flowRecordVoList ? data.flowRecordVoList : []
        console.log(stepList.value, ' stepList.value')
        stepList.value.forEach((item, _index) => {
          if (!item.auditStatus || item.auditStatus == 1) {
            item.status = 'success'
          }
          else {
            item.status = 'error'
          }
        })
        editVisible.value = true
        // 附件
        infoList.value = data.sysPatentFileList ? data.sysPatentFileList : []
        infoList.value.forEach((item, index) => {
          if (item.updateTime) {
            item.createTime = item.updateTime
          }
        })
        attachmentForm.value.patentId = patentId.value
        if (type == 1) {
          console.log(123)
          setTimeout(() => {
            handleUpload(type)
          }, 100)
        }
        console.log('editVisible.value', editVisible.value)
        rowStatus.value = row.status
      }
    })

    .catch((_err) => { })
}

// 校验表格名称或身份证存在两者必须存在
function verificationTableExists() {
  const list = []
  for (let i = 0; i < editForm.value.inventorList.length; i++) {
    if (
      editForm.value.inventorList[i].inventorIdentity == ''
      && editForm.value.inventorList[i].inventorName != ''
    ) {
      Message.warning('请填写身份证号码/护照/台胞证编号!')
      return false
    }
    if (
      editForm.value.inventorList[i].inventorIdentity != ''
      && editForm.value.inventorList[i].inventorName == ''
    ) {
      Message.warning('请填写名称!')
      return false
    }

    list.push(editForm.value.inventorList[i].inventorOrder)
    if (
      (editForm.value.inventorList[i].inventorIdentity
      || editForm.value.inventorList[i].inventorName)
      && isDele.value == false
    ) {
      for (let j = 0; j < list.length; j++) {
        if (list.indexOf(list[j]) !== list.lastIndexOf(list[j])) {
          Message.warning('顺序不可重复!')
          return false
        }
      }
    }
  }
  return true
}
function handleAddPatentInfoToOnline() {
  // const params = {
  //   patentId: editForm.value.patentId,
  //   inventorVoList
  // }
  patentService.addPatentInfoToOnline().then((res) => {
    console.log(res, 'res')
  })
}
// 提交修改
async function editSubmitForm(_e) {
  if (updateDialogTitle.value == '查看') {
    editVisible.value = false
    return false
  }
  const verification = await verificationTableExists()
  if (!verification) {
    return false
  }
  // 发明人信息校验（不可为空）
  const VoList = editForm.value.inventorList.flat()
  VoList.forEach((_item) => {
    for (let i = 0; i < editForm.value.inventorList.length; i++) {
      if (
        (!editForm.value.inventorList[i].inventorIdentity
        && !editForm.value.inventorList[i].inventorName
        && editForm.value.inventorList[i].delFlag == '0')
        || (!editForm.value.inventorList[i].inventorIdentity
        && !editForm.value.inventorList[i].inventorName
        && !editForm.value.inventorList[i].inventorId)
      ) {
        editForm.value.inventorList.splice(i, 1)
      }
    }
  })
  let patentpersonId
  if (editForm.value.patentpersonId.length > 1) {
    patentpersonId = editForm.value.patentpersonId.join(',')
  }
  else {
    patentpersonId = editForm.value.patentpersonId[0].toString()
  }
  const params = {
    ...editForm.value,
    patentpersonId,
  }
  caseService
    .updatePatent(params)
    .then((response) => {
      if (response.code == 200) {
        Message.success('修改成功')
        editVisible.value = false
        getList()
      }
    })
    .finally(() => { })
}

// 提交上传文件
function uploadSubmitForm() {
  scFormRef.value.validate((valid) => {
    if (valid) {
      // 文件是否重复   附件10 其他1
      const temp = infoList.value.reduce((pre, cur, index, arr) => {
        console.log(index, 'index')
        if (pre[cur.fileType]) {
          pre[cur.fileType]++
        }
        else {
          pre[cur.fileType] = 1
        }
        return pre
      }, {})
      if (uploadForm.value.fileType == 2) {
        if (temp[uploadForm.value.fileType] >= 10) {
          Message.warning('其他附件已超过十个，无法上传')
        }
        else {
          submitFile()
        }
      }
      else {
        if (temp[uploadForm.value.fileType]) {
          confirmFile()
        }
        else {
          submitFile()
        }
      }
    }
  })
}

function submitFile() {
  uploadForm.value.fileList = []
  const temp = uploadForm.value.file.split(',')
  temp.forEach((item, index) => {
    const params = {
      fileId: null,
      ossId: item,
      delFlag: 0,
    }
    console.log(params, 'ossid')
    uploadForm.value.fileList.push(params)
  })
  console.log(uploadForm.value, 'uploadForm.value')
  if (!uploadForm.value.file) {
    Message.warning('请选择文件！', 0, { zIndex: 999 })
  }
  else {
    caseService
      .updateFileAndInfo(uploadForm.value)
      .then((res) => {
        if (res.code == 200) {
          Message.success('上传成功!')
          uploadVisible.value = false
          editVisible.value = false
          handleQueryAtt()
          getList()
        }
      })
      .catch((res) => {
        console.log(res)
      })
  }
}

function confirmFile() {
  useMessageBox({
    title: '',
    description: `当前类型文件已存在，是否覆盖？`,
    icon: 'warring',
  })
    .then(() => {
      submitFile()
    })
    .catch((res) => {
      Message.info('已取消上传')
    })
}

// 新增基本信息
function handleAddInfo() {
  const cell = {
    inventorName: '',
    identityType: '',
    nationality: '',
    inventorIdentity: '',
    isPublic: '1',
    inventorOrder: editForm.value.inventorList.length + 1,
  }
  editForm.value.inventorList.push(cell)
  console.log(editForm.value.inventorList, 'add')
}

// 删除
function handleDeleteInfo(data, index) {
  console.log(editForm.value.inventorList[index], 99)
  // this.$nextTick(() => {
  // this.editForm.inventorList.splice(index, 1);
  // editForm.value.inventorList[index].inventorName = ''
  // editForm.value.inventorList[index].inventorIdentity = ''
  // editForm.value.inventorList[index].inventorOrder = ''
  // editForm.value.inventorList[index].delFlag = '2'
  // console.log(editForm.value.inventorList, '111')
  editForm.value.inventorList.splice(index, 1)
  isDele.value = false
  // });
}

// 审核
function handleAudit(id) {
  auditVisible.value = true
  updateDialogTitle.value = '审核'
  auditForm.value.patentId = id
  auditVisible.value = true
}

// 提交
function auditSubmitForm() {
  auditFormRef.value.validate((valid) => {
    if (valid) {
      console.log(auditForm.value, 'auditForm')
      caseService
        .Audit(auditForm.value)
        .then((response) => {
          if (response.code == 200) {
            Message.success('审核成功')
            auditVisible.value = false
            getList()
          }
        })
        .catch((_res) => { })
    }
  })
}

// 导出
function handleExport() {
  proxy.download(
    '/system/patent/export',
    { ...queryParam.value, exportIds: ids.value.join(',') },
    `patent_${new Date().getTime()}.xlsx`,
  )
}
// 取消
function cancel(name) {
  auditForm.value = {
    remark: '',
    status: '',
    cwbankcollectionId: '',
  }

  matchVisible.value = false
  auditVisible.value = false
  editVisible.value = false
  uploadVisible.value = false
  uploadForm.value = []
  allotForm.value = []
}

// 下载
function handleDownloadAtt(row) {
  console.log(row, 'ossid')
  proxy.$download.oss(row.ossId)
}

// 删除
function handleDeleteAtt(row) {
  console.log(updateDialogTitle.value, 'updateDialogTitle')
  const fileId = row.fileId
  useMessageBox({
    title: '',
    description: `是否确认删除文件`,
    icon: 'warring',
  })
    .then(() => {
      return caseService.attachmentDelete(fileId).then((res) => {
        console.log(res, fileId)
      })
    })
    .then((res) => {
      handleQueryAtt()
      Message.success('删除成功')
      if (updateDialogTitle.value == '查看') {
        handleUpdate(Row.value, 2)
      }
      else {
        handleUpdate(Row.value, 3)
      }
    })
    .finally((res) => { })
}

// 控制文件预览显示
function FilePreviewDialogHandle(row) {
  const extension = row.filePath.split('.').pop().toLowerCase()
  console.log(extension, 111)
  if (extension == 'pdf' || extension == 'txt') {
    fileUrl.value = row.filePath
  }
  else if (extension == 'zip') {
    window.open(`/get-file-endpoint/${row.filePath}`, '_blank')
  }
  else {
    fileUrl.value = `https://view.officeapps.live.com/op/view.aspx?src=${row.filePath}`
  }
  fileVisible.value = true
}

function handleOpen() {
  // 对话框打开时自动设置初始大小
  isFullScreen.value = false
}
function toggleFullScreen() {
  isFullScreen.value = !isFullScreen.value
}

// 已交局
function openHandleBureau(row) {
  patentId.value = row.patentId
  useMessageBox({
    title: '',
    description: `是否确定已交局`,
    icon: 'color-wait',
  }).then(() => {
    caseService.addStatusToYjj({ patentId: patentId.value }).then((res) => {
      if (res.code == 200) {
        Message.success('已交局成功')
        getList()
      }
      reviewVisible1.value = false
    })
  })
}

// 上传按钮
function uploadButton(row) {
  return (
    roleGroup.value === '业务员'
    || (roleGroup.value === '工程师组长'
    && roleGroup.value === '工程师'
    && (row.status === '1' || row.status === '4')
    && row.userName === nickName.value)
    || (roleGroup.value === '流程人员' && row.status === '6')
    || (roleGroup.value !== '业务员'
    && roleGroup.value !== '流程人员'
    && (row.status === '1' || row.status === '4')
    && row.userName === nickName.value)
  )
}
// 修改按钮
function editButton(row) {
  return (row.status === '1' && row.userName === nickName.value) || roleGroup.value === '流程人员'
}
// 按钮
function auditButton(row) {
  return (
    (roleGroup.value === '工程师组长'
    && (row.status === String(2) || row.status === String(3)))
    || (roleGroup.value === '流程人员' && row.status === '3')
  )
}
// 已交局按钮
function bureauButton(row) {
  return row.status === '5' && roleGroup.value === '流程人员'
}
function isMore(row) {
  // 定义角色对应的状态条件
  const roleConditions = {
    业务员: () => true,
    流程人员: () => true,
    工程师: () => ['1', '4'].includes(row.status),
    工程师组长: () => true,
    超级管理员: () => true,
    管理员: () => true,
  }

  // 检查角色是否存在于条件中
  if (roleConditions[roleGroup.value]) {
    // 如果角色存在，执行对应的条件检查
    return roleConditions[roleGroup.value]()
  }

  // 如果角色不匹配任何定义的条件，返回false
  return false
}
function handleActiveName(name) {
  activeName.value = name
}

// 预览
function fileView(row) {
  return (
    row.filePath.split('.').pop().toLowerCase() === 'pdf'
    || row.filePath.split('.').pop().toLowerCase() === 'docx'
    || row.filePath.split('.').pop().toLowerCase() === 'png'
    || row.filePath.split('.').pop().toLowerCase() === 'jpg'
  )
}
// 下载
function fileDelete(row) {
  return (
    ((dutyId.value === myId.value || secDutyId.value === myId.value) && row.fileType === '2' && row.isDelFileRole === '1')
    || (gcsId.value === myId.value && row.fileType === '2' && row.isDelFileRole === '1')
    || (row.fileType === '2' && row.isDelFileRole === '1')
  )
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never" class="mb-3">
      <SearchBar :search-config="searchConfig" @search="handleSearch">
        <template #status>
          <el-select v-model="status" placeholder="请选择状态" clearable>
            <el-option
              v-for="(dict, index) in filteredStatusOptions" :key="dict.value" :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </template>
      </SearchBar>
    </el-card>
    <el-card shadow="never">
      <div class="toolbar flex mb-1">
        <div class="mb-2 space-x-3">
          <el-button
            v-hasPermi="['system:case:edit']" type="warning" class="el-gradient-primary"
            :disabled="ids.length === 0" @click="handleBatchAllocation()"
          >
            批量分配
            <el-icon class="el-icon--right">
              <Edit />
            </el-icon>
          </el-button>
          <el-button
            v-hasPermi="['system:case:export']" type="warning" class="el-gradient-warning"
            @click="handleExport()"
          >
            导出
            <el-icon class="el-icon--right">
              <FolderAdd />
            </el-icon>
          </el-button>
        </div>
        <RightToolbar />
      </div>
      <vxe-grid
        :row-config="{
          keyField: 'patentId',
        }" :data="tableData" :columns="tableColumns" :pager-config="pagerConfig" :column-config="{ resizable: true }"
        header-cell-class-name="headerCellClass" max-height="520" @page-change="handlePageChange"
        @checkbox-all="handleCheckChange" @checkbox-change="handleCheckChange"
      >
        <template #status="{ row }">
          <dict-tag :options="sys_patent_status" :value="row.status" />
        </template>
        <template #operate="{ row }">
          <el-button
            v-hasPermi="['system:case:view']" text type="success" size="small"
            @click="handleUpdate(row, 2)"
          >
            查看
          </el-button>
          <el-popover placement="bottom" :width="350" trigger="click">
            <template #reference>
              <span v-if="isMore(row)">
                <el-button text type="primary" size="small">
                  更 多
                </el-button>
              </span>
            </template>
            <el-button
              v-hasPermi="['system:case:allot']" text type="primary" size="small"
              @click="handleAllot(row, 'view')"
            >
              分配
            </el-button>

            <span v-if="uploadButton(row)">
              <el-button
                v-hasPermi="['system:case:upload']" type="success" text size="small"
                @click="handleUpdate(row, 1)"
              >
                上传
              </el-button>
            </span>

            <span v-if="editButton(row)">
              <el-button
                v-hasPermi="['system:case:edit']" text type="danger" size="small"
                @click="handleUpdate(row, 3)"
              >
                修改
              </el-button>
            </span>

            <span v-show="auditButton(row)">
              <el-button
                v-hasPermi="['system:case:audit']" text type="primary" size="small"
                @click="handleAudit(row.patentId)"
              >
                审核
              </el-button>
            </span>

            <span v-if="bureauButton(row)">
              <el-button
                v-hasPermi="['system:case:bureau']" text type="primary" size="small" :icon="Edit"
                @click="openHandleBureau(row, 'edit')"
              >
                已交局
              </el-button>
            </span>
          </el-popover>
        </template>
      </vxe-grid>
    </el-card>
    <!-- 分配 -->
    <el-dialog
      v-model="updateDialogVisible" :destroy-on-close="true" class="custom-dialog" width="500px"
      @close="allocationClose"
    >
      <template #title>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            {{ updateDialogTitle }}
          </span>
        </div>
      </template>
      <BaseForm
        :field-list="updateFormList" :model="allotForm" class="px-5" @submit="allotSubmitForm"
        @cancel="allocationClose"
      />
    </el-dialog>

    <!-- 审核  -->
    <el-dialog v-model="auditVisible" :destroy-on-close="true" class="custom-dialog" draggable @close="cancel()">
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            {{ updateDialogTitle }}
          </span>
        </div>
      </template>
      <el-form ref="auditFormRef" :model="auditForm" :rules="rules" label-width="120px">
        <el-form-item label="是否通过" prop="auditStatus">
          <el-radio-group v-model="auditForm.auditStatus">
            <el-radio label="1">
              通过
            </el-radio>
            <el-radio label="0">
              不通过
            </el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="意见" prop="auditSuggest">
          <el-input
            v-model="auditForm.auditSuggest" type="textarea" :rows="3" placeholder="请输入意见" maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="auditSubmitForm">
            确 定
          </el-button>
          <el-button @click="cancel()">
            取 消
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 上传 -->
    <el-dialog
      v-model="uploadVisible" width="500px" style="margin-right: 17%" :before-close="cancelFile"
      class="custom-dialog"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            上传
          </span>
        </div>
      </template>
      <el-form ref="scFormRef" :model="uploadForm" label-width="60px" :rules="rules">
        <el-form-item label="类型" prop="fileType">
          <el-select
            v-model="uploadForm.fileType" clearable filterable placeholder="请选择类型" :disabled="uploadDisabled"
            @change="fileTypeChange"
          >
            <el-option
              v-for="item in handleIncludePatentType" :key="item.value" :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文件" prop="file">
          <file-upload
            v-model="uploadForm.file" :limit="limit" :is-file-type="isFileType" :file-type="fileType"
            @input="handleUploadInput"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div
          class="p-3 flex-center"
        >
          <el-button type="primary" @click="uploadSubmitForm">
            确 定
          </el-button>
          <el-button @click="cancel()">
            取 消
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 预览 -->
    <el-dialog
      v-model="fileVisible" :close-on-click-modal="false" :fullscreen="true" class="file-dialog"
      @open="handleOpen"
    >
      <iframe :src="fileUrl" frameborder="0" width="100%" height="100%" />
    </el-dialog>

    <!-- 查看 编辑 -->
    <el-drawer
      v-model="editVisible" :destroy-on-close="true" class="custom-drawer" size="60%" :show-close="false"
      @before-close="handleReset"
    >
      <template #header>
        <div class="dialog-header">
          <span class="relative top-3 text-[16px]">
            {{ updateDialogTitle }}
          </span>
        </div>
      </template>
      <div class="content-tabs mb-5">
        <ul class="flex">
          <li
            v-for="item in tabsList" :key="item.id"
            class="flex-1 text-center rounded h-13 flex-center text-[16px] tabs-item"
            :class="{ active: activeName === item.name }" @click="handleActiveName(item.name)"
          >
            <span>
              <SvgIcon :name="item.icon" class="tabs-icon" class-name="mr-1 w-[21px] h-[21px] relative top-[1px]" />
            </span>
            {{ item.label }}
          </li>
        </ul>
      </div>
      <transition name="el-fade-in-linear">
        <div v-if="activeName === 'first'">
          <el-form :model="editForm" label-width="120px" :rules="rules" class="mt-3">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="案件编号" prop="reelNumber">
                  <el-input v-model="editForm.reelNumber" placeholder="请输入案件编号" clearable disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="合同编号" prop="contractNo">
                  <el-input v-model="editForm.contractNo" placeholder="请输入合同编号" clearable disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="客户名称" prop="customerId">
                  <el-select v-model="editForm.customerId" filterable clearable placeholder="请选择客户" disabled>
                    <el-option
                      v-for="item in customerlist" :key="item.customerId" :label="item.customerName"
                      :value="item.customerId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="案件名称" prop="patentName">
                  <el-input v-model="editForm.patentName" placeholder="请输入案件名称" clearable :disabled="disabled" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="业务类型" prop="businessName">
                  <el-input v-model="editForm.businessName" placeholder="请输入业务类型" clearable disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="状态" prop="status">
                  <el-select v-model="editForm.status" placeholder="请选择状态" clearable disabled>
                    <el-option
                      v-for="dict in sys_patent_status" :key="dict.value" :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="分配人员" prop="engineerId">
                  <el-select v-model="editForm.engineerId" clearable filterable placeholder="请选择分配人员" disabled>
                    <el-option
                      v-for="item in engineerlist" :key="item.userId" :label="item.userName"
                      :value="item.userId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="专利权人" prop="patentpersonId">
                  <el-select v-model="editForm.patentpersonId" filterable clearable multiple placeholder="请选择专利权人" :disabled="disabled">
                    <el-option
                      v-for="item in customerlist" :key="item.customerId" :label="item.customerName"
                      :value="item.customerId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form label-width="120px">
                  <el-form-item label="备注" prop="remark">
                    <el-input
                      v-model="editForm.remark" type="textarea" :rows="3" placeholder="请输入备注" maxlength="200"
                      show-word-limit clearable :disabled="disabled"
                    />
                  </el-form-item>
                </el-form>
              </el-col>
            </el-row>
            <el-collapse v-model="collapseVal" class="custom-collapse">
              <el-collapse-item name="1" title="专利信息">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="递交端口" prop="submitcompanyId">
                      <el-select v-model="editForm.submitcompanyId" clearable filterable placeholder="请选择递交端口">
                        <el-option
                          v-for="item in companyquerylist" :key="item.submitcompanyId"
                          :label="item.submitcompanyName" :value="item.submitcompanyId"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>

                  <el-col :span="8">
                    <el-form-item label="案件方式" prop="caseType">
                      <el-select v-model="editForm.caseType" placeholder="请选择案件方式" clearable>
                        <el-option
                          v-for="dict in sys_case_type" :key="dict.value" :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item name="2" title="联系人信息" class="mt-3">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <el-form-item label="专利联系人" prop="patentLinkman">
                      <el-input v-model="editForm.patentLinkman" placeholder="请输入专利联系人" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="专利联系人电话" prop="linkmanPhone" label-width="121px">
                      <el-input v-model="editForm.linkmanPhone" placeholder="请输入专利联系人电话" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="专利联系人邮箱" prop="linkmanMail" label-width="121px">
                      <el-input v-model="editForm.linkmanMail" placeholder="请输入专利联系人邮箱" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="所属区域" prop="linkmanMail" label-width="121px">
                      <el-input v-model="editForm.linkmanMail" placeholder="所属区域" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="城区（乡）、街道、门牌号" prop="linkmanMail" label-width="121px">
                      <el-input v-model="editForm.linkmanMail" placeholder="城区（乡）、街道、门牌号" clearable />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="邮政编码" prop="linkmanMail" label-width="121px">
                      <el-input v-model="editForm.linkmanMail" placeholder="邮政编码" clearable />
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-collapse-item>
              <el-collapse-item name="3" title="发明人信息" class="mt-3">
                <el-form label-width="120px">
                  <div style="margin-bottom: 15px">
                    <el-button type="primary" plain :disabled="disabled" @click="handleAddInfo">
                      新增
                      <el-icon class="el-icon--right">
                        <CirclePlusFilled />
                      </el-icon>
                    </el-button>
                  </div>
                  <vxe-grid :data="editForm.inventorList" :columns="inventorColumns" border header-cell-class-name="headerCellContractClass">
                    <template #inventorName="{ row }">
                      <el-input v-model="row.inventorName" placeholder="请输入姓名" :disabled="disabled" clearable />
                    </template>
                    <template #identityType="{ row }">
                      <el-select v-model="row.identityType" placeholder="请选择证件类型" clearable :disabled="disabled">
                        <el-option
                          v-for="dict in certificate_type"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </template>
                    <template #nationality="{ row }">
                      <el-select v-model="row.nationality" placeholder="请选择国籍或地区" clearable :disabled="disabled">
                        <el-option
                          v-for="dict in country_or_area"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                        />
                      </el-select>
                    </template>
                    <template #inventorIdentity="{ row }">
                      <el-input
                        v-model="row.inventorIdentity" :disabled="disabled" placeholder="请输入证件号"
                        clearable
                      />
                    </template>
                    <template #isPublic="{ row }">
                      <el-switch
                        v-model="row.isPublic"
                        inline-prompt
                        active-text="公布"
                        active-value="0"
                        inactive-text="不公布"
                        inactive-value="1"
                        :disabled="disabled"
                      />
                    </template>
                    <!--                    <template #inventorOrder="{ row }"> -->
                    <!--                      <el-input-number -->
                    <!--                        v-model="row.inventorOrder" placeholder="请输入顺序" :disabled="true" clearable -->
                    <!--                        :min="0" -->
                    <!--                      /> -->
                    <!--                    </template> -->
                    <template #operate="{ row }">
                      <el-button type="danger" :disabled="disabled" size="small" @click="handleDeleteInfo(row, $index)">
                        删除
                      </el-button>
                    </template>
                  </vxe-grid>
                </el-form>
              </el-collapse-item>
              <el-collapse-item name="4" title="申请人信息" class="mt-3">
                <vxe-grid :data="editForm.customerInformationList" :columns="customerInformationColumns" border header-cell-class-name="headerCellContractClass" />
              </el-collapse-item>
            </el-collapse>
          </el-form>
        </div>
      </transition>
      <transition name="el-fade-in-linear">
        <div v-if="activeName === 'second'">
          <el-steps v-if="stepList.length > 0" direction="vertical" :active="stepList.length" :align-center="true">
            <el-step v-for="item in stepList" :key="item.recordId" :title="item.contractStatus" status="finish">
              <template #icon>
                <div class="rounded-full w-3 h-3 bg-[var(--el-color-primary)]" />
              </template>
              <template #title>
                <div
                  style="
                    display: flex;
                    flex-direction: row-reverse;
                    justify-content: flex-end;
                  "
                >
                  <span v-if="item.auditStatus" style="margin-left: 10px">[{{ item.auditStatus == 0 ? "不通过" : "通过"
                  }}]</span>
                  <dict-tag :options="sys_patent_status" :value="item.contractStatus" />
                </div>
              </template>
              <template #description>
                <div class="my-2 w-130">
                  <div
                    class="description-title flex bg-[var(--el-color-primary)] rounded text-white text-[14px] py-2 w-full"
                  >
                    <div class="flex-1 flex-center">
                      操作人
                    </div>
                    <div class="flex-1 flex-center">
                      意见
                    </div>
                    <div class="flex-1 flex-center">
                      操作时间
                    </div>
                  </div>
                  <div class="description-item flex bg-[#E8F2FF] rounded text-black text-[14px] py-2 w-full">
                    <div class="flex-1 flex-center w-20">
                      {{ item.operUserNickName }} [{{ item.operUserName }}]
                    </div>
                    <div class="flex-1 flex-center">
                      {{ item.auditSuggest }}
                    </div>
                    <div class="flex-1 flex-center">
                      {{ item.operTime }}
                    </div>
                  </div>
                </div>
              </template>
            </el-step>
          </el-steps>
          <el-empty v-else :image-size="200" />
        </div>
      </transition>
      <transition name="el-fade-in-linear">
        <div v-if="activeName === 'third'">
          <el-form ref="attachmentFormRef" class="file-form" :model="attachmentForm">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="类型" prop="fileType">
                  <el-select v-model="attachmentForm.fileType" clearable filterable placeholder="请选择类型">
                    <el-option
                      v-for="dict in patent_file_type" :key="dict.value" :label="dict.label"
                      :value="dict.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-button type="primary" @click="handleQueryAtt">
                  查询
                  <el-icon class="el-icon--right">
                    <Search />
                  </el-icon>
                </el-button>
              </el-col>
            </el-row>
          </el-form>
          <el-button type="primary" plain style="margin-bottom: 8px" :disabled="disabled" @click="handleUpload(2)">
            上传
            <el-icon>
              <UploadFilled />
            </el-icon>
          </el-button>
          <vxe-grid :data="infoList" :columns="uploadColumns" border header-cell-class-name="headerCellContractClass">
            <template #fileType="{ row }">
              <dict-tag :options="patent_file_type" :value="row.fileType" />
            </template>

            <template #operate="{ row }">
              <el-button
                v-if="fileView(row)"
                text
                type="primary"
                size="small"
                @click="FilePreviewDialogHandle(row)"
              >
                预览
              </el-button>
              <el-button type="success" text size="small" @click="handleDownloadAtt(row)">
                下载
              </el-button>
              <el-button
                v-if="fileDelete(row)"
                size="small"
                type="danger"
                text
                @click="handleDeleteAtt(row)"
              >
                删除
              </el-button>
            </template>
          </vxe-grid>
        </div>
      </transition>
      <div class="close-btn flex-center" @click="cancel">
        <el-icon>
          <CloseBold />
        </el-icon>
      </div>

      <template #footer>
        <div class="flex-center mt-[20px]">
          <el-button type="primary" @click="editSubmitForm">
            确 定
          </el-button>
          <el-button @click="cancel">
            取 消
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
  <el-dialog
    v-model="inventorVoVisible"
    title="新增发明人信息"
    class="custom-dialog"
  >
    <BaseForm :field-list="inventorFieldList" :model="inventorForm" />
  </el-dialog>
</template>

<style scoped lang="scss">
.dialog-header {
  width: 180px;
  height: 0;
  border-width: 0px 45px 45px 0px;
  border-style: none solid solid;
  border-color: transparent transparent var(--el-color-primary);
  color: #fff;
  display: flex;
  justify-content: center;
}

.dialog-footer {
  padding: 0px 10px 20px 0;
}

::v-deep(.el-tabs__nav) {
  width: 100% !important;

  .el-tabs__item {
    width: 33%;
  }
}

::v-deep(.file-dialog) {
  .el-dialog {
    height: 100% !important;

    .el-dialog__header {
      height: 10px;
    }
  }
}

::v-deep(.el-dialog__body) {
  height: 90% !important;
}

.file-form {
  .el-col-16 {
    overflow: auto;
    text-align: end;
  }
}

.el-steps {
  margin: 10px 150px;

  .el-step__description {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

::v-deep(.el-step__title) {
  width: 150px;
  margin-left: -185px;
  display: flex;
  justify-content: flex-end;
}

.tabs-item {
  background: var(--el-bg-color-page);
  color: #999;
  transition: all 0.3s;
  cursor: pointer;

  &:hover {
    background: #e8f2ff;
    color: var(--el-color-primary);
    transition: all 0.3s;
  }
}

.tabs-item.active {
  background: #e8f2ff;
  color: var(--el-color-primary);
  transition: all 0.3s;
  font-weight: bold;

  .tabs-icon {
    color: var(--el-color-primary);
    width: 20px;
    height: 20px;
  }
}

.close-btn {
  position: fixed;
  top: 50%;
  margin-left: -65px;
  cursor: pointer;
  border: none;
  outline: none;
  width: 45px;
  height: 45px;
  font-size: 22px;
  line-height: 40px;
  text-align: center;
  background-color: var(--el-color-primary);
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

  &:hover {
    background-color: #f56c6c;

    i {
      transition: transform 0.5s, -webkit-transform 0.5s;
      transform: rotate(90deg);
    }
  }
}

.w-130 {
  width: 800px;
}

.upload-file {
  width: 100%;
}
</style>
